<template>
  <div class="register">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <header id="header" class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">注册</h1>
        </header>
        <div class="mui-content">
          <form class="mui-input-group content" @submit.prevent="userRegister" :model="regData">
            <div class="mui-input-row z-row" :class="{'is-danger':errors.has('phone')}">
              <label>注册账号</label>
              <input
                name="phone"
                v-model="regData.phone"
                type="text"
                class="mui-input-clear"
                maxlength="11"
                v-validate="'required|numeric|mobile'"
                placeholder="请输入手机号"/>
            </div>
            <span class="error-message" v-show="errors.has('phone')">{{errors.first('phone')}}</span>
            <div class="z-code-row z-row"  :class="{'iscode-danger':errors.has('code')}">
              <div class="mui-input-row z-row" :class="{'is-danger':errors.has('code')}">
                <label>短信验证</label>
                <input
                  name="code"
                  v-model="regData.code"
                  type="text"
                  class="mui-input-clear z-codeinput"
                  maxlength="6"
                  v-validate="'required|numeric'"
                  placeholder="请输入验证码"/>
              </div>
              <button id="codeButton" type="button" class="mui-btn mui-btn-primary mui-btn-outlined z-codebutton" v-tap="{method:sendCode,params:60}">获取验证码</button>
            </div>
            <span class="error-message" v-show="errors.has('code')">{{errors.first('code')}}</span>
            <div class="mui-input-row z-row" :class="{'is-danger':errors.has('newpassword')}">
              <label>注册密码</label>
              <input
                name="newpassword"
                v-model="regData.password"
                ref="newpassword"
                type="password"
                class="mui-input-password"
                maxlength="15"
                minlength="6"
                data-vv-as="密码"
                v-validate="'required|password'"
                placeholder="请输入6-15位密码"/>
            </div>
            <span class="error-message" v-show="errors.has('newpassword')">{{errors.first('newpassword')}}</span>
            <div class="mui-input-row z-row" :class="{'is-danger':errors.has('repassword')}">
              <label>确认密码</label>
              <input
                name="repassword"
                v-model="regData.repassword"
                type="password"
                class="mui-input-password"
                maxlength="15"
                minlength="6"
                data-vv-as="确认密码"
                v-validate="'required|confirmed:newpassword'"
                placeholder="请再次输入密码"/>
            </div>
            <span class="error-message" v-show="errors.has('repassword')">{{errors.first('repassword')}}</span>
            <div class="mui-input-row mui-checkbox mui-left z-checkboxrow">
              <input name="protocolCheckbox" value="agree" type="checkbox" v-model="regData.protocol">
              <label>同意</label><span class="z-protocol" v-tap="{method:toPage,params:'/protocol'}">《易销国际注册协议》</span>
            </div>
            <div class="mui-button-row z-row z-regbutton">
              <button
                id="registerBut"
                type="submit"
                class="mui-btn mui-btn-primary mui-btn-outlined"
                data-loading-text="提交中"
                data-loading-icon="mui-spinner mui-spinner-custom"
                :class="{'disabled':!regData.protocol}"
                :disabled="!regData.protocol">提交</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        regData:{
          phone:'',
          code:'',
          password:'',
          repassword:'',
          protocol:false,
        },
        confirmCode:null,
      }
    },
    mounted(){
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
    },
    methods:{
      sendCode(t){
        var that = this;
        that.$validator.validate('phone').then((result)=>{
          if(result){
            var obj=mui("#codeButton")[0];
            var objTag = obj.tagName.toLowerCase();
            if (objTag !== "input" && objTag != "button") {
              return;
            }
            that.$http({
              url: that.$http.adornUrl(that.$api.SendCode),
              method:'get',
              params:that.$http.adornParams({"phone":that.regData.phone,"type":"register"})
            }).then(function(res){
              mui.toast(res.errmsg);
              if(res.errno == 0){
                that.confirmCode = res.data;
              }
            }).catch(function (err) {
              console.log(err);
            });
            var v = objTag !== "input" ? obj.innerText.trim() : obj.value;
            var waitMessage = "(s)";
            var i = setInterval(function(){
              if(t > 0) {
                switch (objTag) {
                  case "input":
                    obj.value = (--t) + waitMessage;
                    break;
                  case "button":
                    obj.innerText = (--t) + waitMessage;
                    break;
                  default:
                    break;
                }
                obj.disabled = true;
              } else {
                window.clearInterval(i);
                switch (objTag) {
                  case "input":
                    obj.value = v;
                    break;
                  case "button":
                    obj.innerText = v;
                    break;
                  default:
                    break;
                }
                obj.disabled = false;
              }
            }, 1500);
          }
        });
      },
      toPage(path){
        this.$router.push(path);
      },
      userRegister(){
        var that = this;
        that.$validator.validate().then((result)=>{
          if(result){
            if(that.regData.code != that.confirmCode){
              mui.toast("验证码有误");
              return;
            }
            mui("#registerBut").button('loading');
            that.$http({
              url: that.$http.adornUrl(that.$api.Register),
              method:'get',
              params:that.$http.adornParams({"mobile":that.regData.phone,"password":that.regData.password,"Code":that.regData.code})
            }).then(function(res){
              mui.toast(res.errmsg);
              if(res.errno == 0){
                that.$router.go(-1)
              }else{
                mui("#registerBut").button('reset');
              }
            }).catch(function (err) {
              console.log(err);
            });
          }
        });
      }
    }
  }
</script>

<style scoped lang="less">
  .register{
    .mui-scroll-wrapper{
      background-color: #fff;
    }
    .mui-bar{
      background-color: #fff;
      .mui-title{
        font-size: 0.36rem;
      }
    }
    .mui-bar-nav {
      -webkit-box-shadow: 0 1px 6px #e6e6e6;
      box-shadow: 0 1px 6px #e6e6e6;
    }
    .mui-input-group:after{
      height: 0px;
    }
    .mui-input-group .mui-input-row:after{
      height: 0px;
    }
    .content{
      padding:1.87rem 0.3rem 0 0.3rem;
      .z-row{
        height:0.8rem;
        margin-bottom:0.36rem;
        border:1px solid #ccc;
        border-radius: 0.1rem;
        label{
          font-size: 0.3rem;
          line-height: 0.8rem;
          padding:0 15px;
          width: 30%;
          border-right: 1px solid #ccc;
        }
        input{
          font-size: 0.3rem;
          height: 0.8rem;
          line-height: 0.8rem;
          width:70%;
          float: left;
          padding-left: 0.2rem;
        }
      }
      .z-code-row{
        border:0px solid #ccc;
        .z-row{
          margin-top:0;
          width:75%;
          float: left;
          label{
            width: 40%;
          }
          input{
            width:60%;
          }
        }
        .z-codebutton{
          width:24%;
          float: right;
          height: 0.8rem;
          padding:0;
        }
      }
      .z-checkboxrow{
        height:0.5rem;
        font-size: 0.2rem;
        input[type=checkbox]{
          height:0.35rem;
          line-height: 0.35rem;
          top:0;
          left:0;
          margin-top:0.06rem;
        }
        input[type=checkbox]:before{
          font-size: 0.35rem;
        }
        label{
          height:0.5rem;
          line-height: 0.5rem;
          padding:0 0 0 0.4rem;
          color:#000;
          width:1rem;
        }
        .z-protocol{
          display: inline-block;
          float: none;
          color:#007aff;
        }
      }
      .z-regbutton{
        margin-top:0.1rem;
        padding-top: 0px;
        border:0;
        button{
          width:100%;
          height:100%;
          border-radius: 0.2rem;
        }
        .disabled{
          color:#333;
          border:1px solid #333;
        }
      }
      .iscode-danger{
        margin-bottom:0;
      }
      .is-danger{
        border:1px solid red;
        margin-bottom:0;
      }
      .error-message{
        font-size: 0.18rem;
        color:red;
      }
    }
  }
</style>
